<template>
    <div class="confirmPop">
        <header class="text-center">
            <p class="font-34 mb-80">{{ $t('确认报价') }}</p>
        </header>
        <main class="confirmPop-main">
            <div class="main-box">
                <img class="box-img mb-20" :src="`${HOST_URL}/symbol/${form.symbol.toLowerCase()}.png`" @error="handleImageError">
                <p class="mb-30 font-28" style="color: #868c9a;">{{ $t('从') }}</p>
                <p class="font-30" style="color: #333;">{{ form.volume }} {{ form.symbol }}</p>
            </div>
            <img src="@/assets/image/exchange/icon_6.png" class="w-30 h-20" style="margin-top:-70px" />
            <div class="main-box">
                <img class="box-img mb-20" :src="`${HOST_URL}/symbol/${form.symbol_to.toLowerCase()}.png`" @error="handleImageError">
                <p class="mb-30 font-28" style="color: #868c9a;">{{ $t('至') }}</p>
                <p class="font-30" style="color: #333;">{{ (form.volume * form.rate).toFixed(5) }} {{ form.symbol_to }}</p>
            </div>
        </main>
        <footer class="confirmPop-footer">
            <div class="footer-box">
                <div class="flex justify-between font-28 mb-25">
                    <p style="color: #868c9a;">{{ $t('类型') }}</p><p style="color: #333;">{{ $t('市价') }}</p>
                </div>
                <div class="flex justify-between font-28">
                    <p style="color: #868c9a;">{{ $t('汇率') }}</p><p style="color: #333;">1 {{ form.symbol }} ≈ {{ form.rate.toFixed(5) }} {{ form.symbol_to }}</p>
                </div>
            </div>
            <div class="footer-button">
                <button class="button-close" @click="closePop">{{ $t('返回') }}</button>
                <button class="button-submit" @click="submit" v-button>{{ $t('闪兑') }}（{{ count }}{{ $t('秒') }}）</button>
            </div>
        </footer>
    </div>
</template>

<script>
import { HOST_URL } from '@/config';
import { _exchange } from "@/API/fund.api";
import defaultImage from '@/assets/loading-default.png';
export default {
    props:{
        form:{
            type:Object,
            default:()=>{},
        }
    },
    data() {
        return {
            HOST_URL,
            defaultImage,
            count: 10,
            timer:null,
        }
    },
    mounted() {
        this.timing();
    },
    methods: {
        handleImageError(event){
            event.target.src = this.defaultImage;
        },
        closePop(){
            this.$emit('closePop',false);
        },
        submit(){
            _exchange(this.form).then(() => {
                this.$router.push('/exchange/exchangeSubmit?data=' + JSON.stringify(this.form))
                this.$emit('closePop',false);
            })
        },
        timing(){
            this.timer = setInterval(() => {
                this.count--
                if (this.count <= 0) {
                    this.clearInterval();
                    this.$toast(this.$t('汇率已变化,请重新确认'))
                    this.$emit('closePop',false);
                }
            }, 1000)
        },
        clearInterval() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        }
    },
    destroyed(){
        this.clearInterval();
    }
}
</script>

<style lang="scss" scoped>
.confirmPop{
    .confirmPop-main{
        display: flex;
        align-items: center;
        gap: 40px;
        margin-bottom: 60px;
        .main-box{
            flex: 1;
            text-align: center;
            .box-img{
                width: 66px;
                height: 66px;
            }
        }
    }
    .confirmPop-footer{
        .footer-box{
            background-color: #F5F5F5;
            padding: 30px;
            border-radius: 25px;
            box-shadow: 0px 0.25rem 1rem rgba(0, 0, 0, 0.21);
            margin-bottom: 100px;
        }
        .footer-button{
            display: flex;
            gap: 40px;
            .button-close,.button-submit{
                flex: 1;
                border: 0;
                height: 80px;
                color: #fff;
                font-size: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 10px;
            }
            .button-close{
                background-color: #C8CAD2;
            }
            .button-submit{
                background-color: #2C78F8;
            }
        }
    }
}
</style>